<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        li {
            height: 548px;
            /* border: 1px solid #000; */
        }

        img {
            display: block;
            height: 100%;
        }
    </style>
</head>

<body>
    <ul>
        <!-- 第一张不需要懒加载, 因为打开页面就进去了可视区域, lazyload属性只是用于识别是否需要懒加载, 无其他意义 -->
        <li> <img src="./lazyImg/01.jpeg" lazyload="false"></li>
        <li> <img src="" data-src="./lazyImg/02.jpeg" lazyload="true"></li>
        <li> <img src="" data-src="./lazyImg/03.jpeg" lazyload="true"></li>
        <li> <img src="" data-src="./lazyImg/04.jpeg" lazyload="true"></li>
        <li> <img src="" data-src="./lazyImg/05.jpeg" lazyload="true"></li>
    </ul>

    <!--  
        懒加载 (图片懒加载、延迟加载)
        长网页中使用懒加载技术较多, 是前端优化的一种技术
        用户滚动页面到图片之前, 可视区域外的图片不会加载, 可视区域内的图片才会加载出来

        优点:
        1. 减少服务器的压力(减少无效(没必要)资源加载)
        2. 使网页加载更快, 提高用户体验
        3. 防止并发加载的资源过多会阻塞js的加载

        实现原理
        1. 监听事件 scroll, 判断用户滚动网页是否进入图片的可视区域
        2. 利用自定义属性data-, src属性值为空
    -->

    <script>
        lazyImgFn()
        // 封装懒加载函数
        function lazyImgFn() {
            console.log("滚动中...");
            // 记录网页滚动的scrollTop距离
            let domScropTop = document.documentElement.scrollTop;
            // 获取需要懒加载的图片元素
            let lazyImgs = document.querySelectorAll("img[lazyload='true']");

            // 计算图片是否到达可视区域
            // 遍历所有需要懒加载的图片, 目的是获取所有的图片离顶部的距离
            lazyImgs.forEach(el => {
                // 浏览器屏幕高度 + 文档的scropTop >= 图片距离文档顶部的高度
                if (window.innerHeight + domScropTop >= el.offsetTop) {
                    // 到达可视区域
                    // 将data-src属性值赋值给对应图片src属性
                    el.setAttribute("src", el.getAttribute("data-src"));
                    // 将lazyload属性修改为false(判断是否需要进行懒加载)
                    el.setAttribute("lazyload", "false")
                }
            })
        }


        // 监听页面滚动事件
        document.addEventListener("scroll", () => {
            lazyImgFn();
        })
    </script>
</body>

</html>